<template>
  <div class="contract_page">
    <!-- 顶部导航 开始 -->
    <div class="top_menu">
      <NavBar></NavBar>
    </div>
    <!-- 顶部导航 end -->

    <div class="w1200 content mt20 mb20">
      <!-- 左侧菜单 开始 -->
      <div class="menu_box">
        <div
          class="cell"
          :class="menuId == item.id ? 'active' : ''"
          v-for="(item, index) in menuList"
          :key="`menu_${index}`"
          @click="menuEvent(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <!-- 左侧菜单 end -->

      <!-- 右侧内容 开始 -->
      <div class="content_box">
        <!-- 用户条款 开始 -->
        <Agreement v-if="menuId == 1" />
        <!-- 用户条款 end -->

        <!-- 隐私协议 开始 -->
        <Privacy v-if="menuId == 2" />
        <!-- 隐私协议 end -->
      </div>
      <!-- 右侧内容 end -->
    </div>

    <!-- 页脚 开始 -->
    <div class="bottom_footer">
      <Footer />
    </div>
    <!-- 页脚 end -->
  </div>
</template>
<script>
import NavBar from "@/components/menu/index.vue";
import Footer from "@/components/footer/index.vue";
import Agreement from "./agreement.vue";
import Privacy from "./privacy.vue";
export default {
  components: {
    NavBar,
    Footer,
    Agreement,
    Privacy,
  },
  data() {
    return {
      menuList: [
        { name: "用户条款", id: 1 },
        { name: "隐私协议", id: 2 },
      ],
      menuId: 1,
    };
  },
  async asyncData({ query }) {
    return { menuId: query.type || 1 };
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      this.menuId = row.id;
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/contract/index.less";
</style>